<template>
    <div class="locale-continere">
        <div class="locale">国际化点击切换</div>
        <div class="locale-item" v-for="item in localeList" :key="item.locale" @click="setLocal(item.locale)">{{ item.name }}</div>
        <p>{{ $t('locale') }}</p>
        <p>{{ $t('test') }}</p>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useRoute } from 'vue-router'
import Setting from '../setting'
export default defineComponent({
  setup () {
    const Route = useRoute()
    const localeList = Setting.locale
    const setLocal = (_lang) => {
      window.location.href = `${process.env.BASE_URL}${_lang}${Route.fullPath}`
    }
    return {
      localeList,
      setLocal
    }
  }
})
</script>

<style lang="less" scoped>
    .locale-continere {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        .locale {
            padding: 20px 0px;
        }
        .locale-item {
            height: 40px;
            line-height: 40px;
            width: 100px;
            color: #fff;
            text-align: center;
            margin-bottom: 20px;
            border-radius: 6px;
            background-color: rgb(11, 100, 216);
        }
    }
</style>
